<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      div {
        width: 100px;
        height: 100px;
        border: solid 1px black;
      }

      .box1 {
        background: pink;
        /* display: none; */
      }

      .box2 {
        background: green;
        /* display: none; */
      }

      .box3 {
        background: blue;
        /* display: none; */
      }
    </style>
  </head>

  <body>
    <button class="b1">sss1</button>
    <button class="b2">sss2</button>
    <button class="b3">sss3</button>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
    <script>
      var btn = document.querySelectorAll("button");
      var box = document.querySelectorAll("div");
      // btn.forEach(function(item,key){
      //     item.onclick=function(){
      //         box.forEach(function(item){
      //             item.style.display = "none"
      //             box[key].style.display = "block"})
      //     }
      // })

      // btn.forEach(function(item,kk){
      //     item.onclick = function(btn,k){
      //         box.forEach(function(item,key){
      //             if(key==kk){
      //                 item.style.display = "block"
      //             }else{
      //                 item.style.display="none"
      //             }
      //         })

      //     }
      // })

      // for(let i=0;i<btn.length;i++){
      //     btn[i].onclick = function(){
      //         console.log(i)
      //     }
      // }

      // for(var i = 0;i<btn.length;i++){
      //     (function(i){
      //         btn[i].onclick = function(){
      //             console.log(i)
      //         }
      //     })(i)
      // }

      // for (var i = 0; i < btn.length; i++) {
      //     btn[i].index = i;
      //     btn[i].onclick = function () {
      //         console.log(this.index)
      //     }
      // }
    </script>
  </body>
</html>
